import 'package:flutter/material.dart';

import '../listView/listData.dart';

class GridViewPage extends StatelessWidget {
  const GridViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: GridView.count(
          crossAxisCount: 3,
          children: const <Widget>[
            Icon(Icons.home),
            Icon(Icons.ac_unit),
            Icon(Icons.search),
            Icon(Icons.settings),
            Icon(Icons.airport_shuttle),
            Icon(Icons.all_inclusive),
            Icon(Icons.beach_access),
            Icon(Icons.cake),
            Icon(Icons.circle),
          ],
        ),
      ),
    );
  }
}

class GridViewPage1 extends StatelessWidget {
  const GridViewPage1({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.count(
          crossAxisCount: 3, // 一行的Widget数量
          crossAxisSpacing: 5, //水平子Widget之间间距
          mainAxisSpacing: 5, //垂直子Widget之间间距

          children: [
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 0',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 1',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 2',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 3',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 4',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 5',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 6',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 7',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 8',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class GridViewPage2 extends StatelessWidget {
  const GridViewPage2({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.extent(
          maxCrossAxisExtent: 200, //这个地方不一定不起作用，底层动态计算合适的长度
          crossAxisSpacing: 5, //水平子Widget之间间距
          mainAxisSpacing: 5, //垂直子Widget之间间距
          childAspectRatio: 1.2, // 子布局宽高比

          children: [
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 0',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 1',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 2',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 3',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 4',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 5',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 6',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 7',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: Text(
                'Hello 8',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.white,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class GridViewPage3 extends StatelessWidget {
  const GridViewPage3({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 5, //水平子Widget之间间距
          mainAxisSpacing: 5, //垂直子Widget之间间距
          // childAspectRatio: 0.7, // 子布局宽高比
          padding: EdgeInsets.all(5),
          children: _buildItemView(),
        ),
      ),
    );
  }

  _buildItemView() {
    var tempList = listData.map((value) {
      return Container(
        decoration: BoxDecoration(
            border: Border.all(
                color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            const SizedBox(height: 12),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis, //超出省略号显示
              style: const TextStyle(fontSize: 14),
            )
          ],
        ),
      );
    });
    return tempList.toList();
  }
}

class GridViewPage4 extends StatelessWidget {
  const GridViewPage4({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 5.0, //水平子 Widget 之间间距
              mainAxisSpacing: 5.0, //垂直子 Widget 之间间距
              crossAxisCount: 2, //一行的 Widget 数量
            ),
            itemBuilder: _buildItemView,
            itemCount: listData.length),
      ),
    );
  }

  Widget _buildItemView(context, index) {
    //  var tempList = listData.map((value) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(
              color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          const SizedBox(height: 12),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis, //超出省略号显示
            style: const TextStyle(fontSize: 14),
          )
        ],
      ),
    );
    //  });
    //  return tempList.toList();
  }
}

class GridViewPage5 extends StatelessWidget {
  const GridViewPage5({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(), //1439662727
        body: GridView.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              crossAxisSpacing: 5.0, //水平子 Widget 之间间距
              mainAxisSpacing: 5.0, //垂直子 Widget 之间间距
              // crossAxisCount: 2,
              maxCrossAxisExtent: 220, //一行的 Widget 数量
            ),
            itemBuilder: _buildItemView,
            itemCount: listData.length),
      ),
    );
  }

  Widget _buildItemView(context, index) {
    //  var tempList = listData.map((value) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(
              color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          const SizedBox(height: 12),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            overflow: TextOverflow.ellipsis, //超出省略号显示
            style: const TextStyle(fontSize: 14),
          )
        ],
      ),
    );
    //  });
    //  return tempList.toList();
  }
}
